import React, { useRef, useState } from 'react'
import style from './style.module.scss'
import background from '../../assets/images/background.jpg'
import { Card, Carousel, Spin, message as Message } from 'antd'
import { RegisterForm } from './RegisterForm'
import { ConfirmMailForm } from './ConfirmMailForm'
import LeoModal from '../../widgets/LeoModal'
import LeoButton from '../../widgets/LeoButton'

export default function Join() {
    const [isProcessing, setIsProcessing] = useState(false)
    const tab = useRef<any>()

    // make spin spinning.
    const onHandlerProcessing = () => {
        setIsProcessing(true)
    }

    const onRegisterSuccess = async (uid: string) => {
        setIsProcessing(false)
        Message.success(`注册成功`)
        tab.current.next()
    }

    const onRegisterFailed = async (message: string) => {
        setIsProcessing(false)
        await Message.error(message)
    }

    const onConfirmSuccess = async () => {
        setIsProcessing(false)
        setTimeout(() => {
            window.location.href = '/home'
        }, 3000)
        LeoModal.show({
            title: '验证邮箱',
            children: (
                <div>
                    <p>验证成功，现在为您跳转到商城页面。</p>
                </div>
            )
        })
    }

    const onConfirmFailed = async (message: string) => {
        setIsProcessing(false)
        LeoModal.show({
            title: '验证邮箱',
            children: (
                <div>
                    <p>
                        验证邮箱失败，但您的账户已经注册成功，在您没有前往个人中心<a href="#">验证邮箱</a>
                        前，您无法使用“用户名+邮箱”的形式进行登陆操作。
                    </p>
                    <p>您可以选择进入商城，或留在此页面继续完成验证。</p>
                    <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
                        <LeoButton title="进入商城" to="/home" isInvert />
                    </div>
                </div>
            )
        })
    }

    return (
        <div className={style.wallpaper} style={{ backgroundImage: `url(${background})` }}>
            <div className={`${style.cover} ${style.wrap}`}>
                <div className={style.band}>
                    <h1 className={style.title}>Leo·Gee</h1>
                    <span>世界财富助力慈善</span>
                </div>
                <Spin spinning={isProcessing} wrapperClassName={style.spin__no__blur}>
                    <Card
                        style={{ width: 500, borderRadius: 5, padding: 40 }}
                        bodyStyle={{
                            paddingTop: 0,
                            paddingBottom: 0
                        }}>
                        <Carousel ref={tab} dots={false} effect="fade">
                            <div className={style.slick__wrap}>
                                <RegisterForm
                                    onRegisterSuccess={onRegisterSuccess}
                                    onRegisterFailed={onRegisterFailed}
                                    onRegisterProcessing={onHandlerProcessing}
                                />
                            </div>
                            <div>
                                <ConfirmMailForm
                                    onConfirmSuccess={onConfirmSuccess}
                                    onConfirmFailed={onConfirmFailed}
                                    onConfirmProcessing={onHandlerProcessing}
                                />
                            </div>
                        </Carousel>
                    </Card>
                </Spin>
            </div>
        </div>
    )
}
